<template>
	<view class=""
		:style="'background: url(' + imgData.rechargeBg + ') no-repeat;background-size: contain;height:' + systemInfo.screenHeight + 'px;'">
		<u-navbar title="元宝钱包" bgColor="transparent" :fixed="false" :autoBack="true" leftIconColor="#fff"
			:titleStyle="{'color':'#fff'}"></u-navbar>
		<view class="flex-column money1">
			<view class="big-size money">
				{{$userInfo.money}}
			</view>
			<view class="small-size">
				元宝钱包
			</view>
		</view>
		<view class="" style="margin-top: 250rpx;">
			<view class="p-30">
				<view class="card p-30 flex-row">
					<view class="flex-sub text-center">
						<view class="sub-color big-size">
							{{$userInfo.money}}
						</view>
						<view class="small-size mt-10 gray-color">
							可用元宝
						</view>
					</view>
				<!-- 	<view class="flex-sub text-center">
						<view class="sub-color big-size">
							{{$userInfo.money}}
						</view>
						<view class="small-size mt-10 gray-color">
							冻结元宝
						</view>
					</view> -->
					<navigator url="/pages/mine/money-log"
						class="flex-sub text-center flex-row align-center justify-center">
						收益记录
					</navigator>
				</view>
			</view>
			<view class="content mt-30" v-if="configData.program == 1">
				<view class="size fw-700">
					元宝充值
				</view>
				<view class="flex-row flex-wrap justify-between">
					<view class="item flex-column justify-center align-center" :class="{'active' : item.checked}"
						@click="setRecharge(index)" v-for="(item,index) in list">
						<view class="size flex-row align-center">
							<!-- <image src="/static/img/jiu.png" mode=""></image> -->
							<u-image :src="money" width="40rpx" height="40rpx"></u-image>
							<view class="ml-10 fw-700 size">
								{{item.money}}
							</view>
						</view>
						<view class="small-size mt-10">
							{{item.price}} 元
						</view>
						<view class="img" v-if="item.checked">
							<image src="/static/img/user/gou.png" style="width: 50rpx;height: 50rpx" mode="widthFix">
							</image>
						</view>
					</view>
				</view>
				<view class="submit">
					<view class="small-size mb-30">充值即代表同意<span class="color" style="color: #449BEC;">《用服务协议》和《支付协议》</span></view>
					<u-button @click="submit" color="linear-gradient( 91deg, #FF414A 0%, #FF6C60 100%)" shape="circle" :text="btnText"></u-button>
				</view>
			</view>
		
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		rechargeList,
		rechargeSubmit
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				btnText:"立即充值",
				bg: "",
				list: []
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			setRecharge(index) {
				this.btnText = "立即充值";
				this.list = this.list.map((v, i) => {
					if (index == i) {
						v.checked = !v.checked
						this.btnText += ` ${v.money} 元`
					} else {
						v.checked = false
					}

					return v;
				})
			},
			initData() {
				rechargeList().then(res => {
					this.list = res.map(v => {
						v.checked = false;
						return v;
					});
				})
			},
			submit() {
				let vm = this;
				let arr = this.list.filter(v => v.checked);
				console.log('arr', arr);
				if (arr.length == 0) {
					this.$u.toast('请选择充值');
					return false;
				}
				rechargeSubmit({
					'recharge_id': arr[0].id
				}).then(async res => {
					console.log(res);
					let ret = await this.paydata(res);
					if (ret) {
						vm.$refs.uToast.show({
							type: 'success',
							message: '支付成功',
							complete() {
								uni.hideLoading();
								vm.loading = false;
								uni.redirectTo({
									url: '/pages/mine/index'
								})
							}
						})
					} else {
						vm.$refs.uToast.show({
							type: 'error',
							message: '支付失败',
							complete() {
								uni.hideLoading();
								vm.loading = false;
								vm.initData();
							}
						})
					}
				})
			},
	
		}
	}
</script>
<style>
	page {
		background-color: #F5F6F7;
	}
</style>
<style lang="scss" scoped>
	.money1 {
		position: absolute;
		top: 200rpx;
		left: 30rpx;
		color: #fff;
	}

	.money {
		font-size: 80rpx;
		margin-top: 15rpx;
		color: #fff;
	}

	.content {
		background-color: #fff;
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		padding: 60rpx 30rpx;
		min-height: 800rpx;
	}

	.item {
		width: 30%;
		height: 120rpx;
		border: 1rpx solid #FDEACE;
		margin-top: 30rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.active {
		background-color: #FFF7EA;
	}

	.submit {
		margin-top: 60rpx;
		text-align: center;
	}

	.img {
		position: absolute;
		bottom: -11rpx;
		right: 0;
	}
</style>